<template>
 <div class='homeHeader'>
  <div class="header-left">
    <div class="iconfont back-left">&#xe629;</div>
  </div>
  <div class="header-input">
    <span class="iconfont">&#xe63f;</span>
    <input type="text" placeholder=" 输入城市/景点/游玩主体">
  </div>
  <router-link to='/city'>
    <div class="header-right">
     {{this.city}}
      <span class="iconfont icon-right">&#xe6aa;</span>
    </div>
  </router-link>
 </div>
</template>

<script>
  import { mapState } from 'vuex'
export default{
  name: 'homeHeader',
  computed:{
    ...mapState(['city']),
  }
}
</script>

<style lang="stylus" scoped>
@import '~@styles/varibles.styl';
.homeHeader
  width 100%;
  height $headerHeight
  display flex;
  background-color $bgColor;
.header-left
  width .64rem;
  float left;
  line-height $headerHeight
  margin-left 0.2rem;
  color white;
.iconfont
  font-size .4rem!important;
  vertical-align middle;
.header-input
  flex 1;
  height .64rem;
  line-height .64rem;
  margin-top .12rem;
  margin-left .2rem;
  background-color  #fff;
  border-radius .1rem;
  text-align left;
  padding-left 0.2rem;
.header-input >input
  height .54rem;
  font-size 0.14rem ;
.header-right
  color white;
  min-width 1.04rem;
  float left;
  line-height $headerHeight
  padding 0 0.04rem;
.icon-right
  font-size 0.2rem!important
</style>
